<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">
	<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

	<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

<script type="text/javascript">

	$(function(){
		
		//以下日历插件在FF中存在兼容问题，在IE浏览器中可以正常使用。
		/*
		$("#startTime").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
	        autoclose: true,
	        todayBtn: true,
	        pickerPosition: "bottom-left"
		});
		
		$("#endTime").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
	        autoclose: true,
	        todayBtn: true,
	        pickerPosition: "bottom-left"
		});
		*/

		$("#qx").click(function () {

			$("input[name=xz]").prop("checked",this.checked);

		})

		$("#visitBody").on("click",$("input[name=xz]"),function () {

			$("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length);

		})

		pageList(1,2);

		$("#searchBtn").click(function () {

			$("#hidden-owner").val($.trim($("#search-owner").val()));
			$("#hidden-subject").val($.trim($("#search-subject").val()));
			$("#hidden-expiryDate").val($.trim($("#search-expiryDate").val()));
			$("#hidden-contacts").val($.trim($("#search-contacts").val()));
			$("#hidden-state").val($.trim($("#search-state").val()));
			$("#hidden-priority").val($.trim($("#search-priority").val()));

			pageList(1, 2);

		})

		//为删除按钮绑定事件，执行交易删除操作
		$("#deleteBtn").click(function () {

			//找到复选框中所有挑√的复选框的jquery对象
			var $xz = $("input[name=xz]:checked");

			if($xz.length==0){

				alert("请选择需要删除的记录");

				//肯定选了，而且有可能是1条，有可能是多条
			}else{


				if(confirm("确定删除所选中的记录吗？")){

					//拼接参数
					var param = "";

					//将$xz中的每一个dom对象遍历出来，取其value值，就相当于取得了需要删除的记录的id
					for(var i=0;i<$xz.length;i++){

						param += "id="+$($xz[i]).val();

						//如果不是最后一个元素，需要在后面追加一个&符
						if(i<$xz.length-1){

							param += "&";

						}

					}

					$.ajax({

						url : "workbench/visit/deleteByIds.do",
						data : param,
						type : "post",
						dataType : "json",
						success : function (data) {

							if(data.success){

								//删除成功后
								//回到第一页，维持每页展现的记录数
								pageList(1,$("#visitPage").bs_pagination('getOption', 'rowsPerPage'));


							}else{

								alert("删除售后处理失败");

							}


						}

					})


				}




			}


		})

		$("#editBtn").click(function () {

			var $xz = $("input[name=xz]:checked");

			if($xz.length==0){

				alert("请选择需要修改的记录");

			}else if($xz.length>1){

				alert("只能选择一条记录进行修改");

				//肯定只选了一条
			}else{

				var id = $xz.val();

				window.location.href="workbench/visit/edit.do?id=" + id;

			}

		})

		//定制字段
		$("#definedColumns > li").click(function(e) {
			//防止下拉菜单消失
	        e.stopPropagation();
	    });
		
	});

	function pageList(pageNo, pageSize) {

		//将全选的复选框的√干掉
		$("#qx").prop("checked", false);

		//查询前，将隐藏域中保存的信息取出来，重新赋予到搜索框中
		$("#search-owner").val($.trim($("#hidden-owner").val()));
		$("#search-subject").val($.trim($("#hidden-subject").val()));
		$("#search-expiryDate").val($.trim($("#hidden-expiryDate").val()));
		$("#search-contacts").val($.trim($("#hidden-contacts").val()));
		$("#search-state").val($.trim($("#hidden-state").val()));
		$("#search-priority").val($.trim($("#hidden-priority").val()));

		$.ajax({

			url: "workbench/visit/pageList.do",
			data: {

				"pageNo": pageNo,
				"pageSize": pageSize,

				"owner" : $.trim($("#search-owner").val()),
				"subject" : $.trim($("#search-subject").val()),
				"expiryDate" : $.trim($("#search-expiryDate").val()),
				"contacts" : $.trim($("#search-contacts").val()),
				"state" : $.trim($("#search-state").val()),
				"priority" : $.trim($("#search-priority").val())


			},
			type: "get",
			dataType: "json",
			success: function (data) {

				var html = "";

				//每一个n就是每一个市场活动对象
				$.each(data.dataList, function (i, n) {

					html += '<tr class="active">';
					html += '<td><input type="checkbox" name="xz" value="' + n.id + '"/></td>';
					html += '<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/visit/detail.do?id=' + n.id + '\';">' + n.subject + '</a></td>';
					html += '<td>' + n.expiryDate + '</td>';
					html += '<td>' + n.contactsId + '</td>';
					html += '<td>' + n.state + '</td>';
					html += '<td>' + n.priority + '</td>';
					html += '<td>' + n.owner + '</td>';
					html += '</tr>';

				})

				$("#visitBody").html(html);

				//计算总页数
				var totalPages = data.total % pageSize == 0 ? data.total / pageSize : parseInt(data.total / pageSize) + 1;

				//数据处理完毕后，结合分页查询，对前端展现分页信息
				$("#visitPage").bs_pagination({
					currentPage: pageNo, // 页码
					rowsPerPage: pageSize, // 每页显示的记录条数
					maxRowsPerPage: 20, // 每页最多显示的记录条数
					totalPages: totalPages, // 总页数
					totalRows: data.total, // 总记录条数

					visiblePageLinks: 3, // 显示几个卡片

					showGoToPage: true,
					showRowsPerPage: true,
					showRowsInfo: true,
					showRowsDefaultInfo: true,

					//该回调函数时在，点击分页组件的时候触发的
					onChangePage: function (event, data) {
						pageList(data.currentPage, data.rowsPerPage);
					}
				});


			}

		})

	}

</script>
</head>
<body>

	<input type="hidden" id="hidden-owner"/>
	<input type="hidden" id="hidden-subject"/>
	<input type="hidden" id="hidden-expiryDate"/>
	<input type="hidden" id="hidden-contacts"/>
	<input type="hidden" id="hidden-state"/>
	<input type="hidden" id="hidden-priority"/>

	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>任务列表</h3>
			</div>
		</div>
	</div>
	
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
	
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
						<input class="form-control" type="text" id="search-owner">
					  <%--<select class="form-control" id="search-owner">
					  	<option></option>
					  </select>--%>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">主题</div>
				      <input class="form-control" type="text" id="search-subject">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">到期日期</div>
				      <input class="form-control" type="text" id="search-expiryDate">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">联系人</div>
				      <input class="form-control" type="text" id="search-contacts">
				    </div>
				  </div>
				  
				  <br>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">状态</div>
					  <select class="form-control" id="search-state">
						  <option></option>
						  <c:forEach items="${returnStateList}" var="rs">
							  <option value="${rs.value}">${rs.text}</option>
						  </c:forEach>
					  </select>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">优先级</div>
					  <select class="form-control" id="search-priority">
						  <option></option>
						  <c:forEach items="${returnPriorityList}" var="rp">
							  <option value="${rp.value}">${rp.text}</option>
						  </c:forEach>
					  </select>
				    </div>
				  </div>

					<button type="button" class="btn btn-default" id="searchBtn">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" onclick="window.location.href='workbench/visit/add.do';"><span class="glyphicon glyphicon-plus"></span> 任务</button>
				  <button type="button" class="btn btn-default" onclick="alert('可以自行实现对通话的管理');"><span class="glyphicon glyphicon-plus"></span> 通话</button>
				  <button type="button" class="btn btn-default" id="editBtn" ><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="qx"/></td>
							<td>主题</td>
							<td>到期日期</td>
							<td>联系人</td>
							<td>状态</td>
							<td>优先级</td>
							<td>所有者</td>
						</tr>
					</thead>
					<tbody id="visitBody">
						<tr>
							<td><input type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">拜访客户</a></td>
							<td>2017-07-09</td>
							<td>李四先生</td>
							<td>未启动</td>
							<td>高</td>
							<td>zhangsan</td>
						</tr>
						<tr>
							<td><input type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.html';">拜访客户</a></td>
							<td>2017-07-09</td>
							<td>李四先生</td>
							<td>未启动</td>
							<td>高</td>
							<td>zhangsan</td>
						</tr>
					</tbody>
				</table>
			</div>

			<div style="height: 50px; position: relative;top: 30px;">

				<div id="visitPage"></div>

			</div>
			<%--<div style="height: 50px; position: relative;top: 30px;">
				<div>
					<button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
				</div>
				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							10
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">20</a></li>
							<li><a href="#">30</a></li>
						</ul>
					</div>
					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
				</div>
				<div style="position: relative;top: -88px; left: 285px;">
					<nav>
						<ul class="pagination">
							<li class="disabled"><a href="#">首页</a></li>
							<li class="disabled"><a href="#">上一页</a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">下一页</a></li>
							<li class="disabled"><a href="#">末页</a></li>
						</ul>
					</nav>
				</div>
			</div>--%>
			
		</div>
		
	</div>
</body>
</html>